<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item label="选择时间：">
          <el-date-picker
            v-model="searchParams.timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="运行结果：">
          <el-select v-model="searchParams.type" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="20px">
          <div class="refresh-icon" />
        </el-form-item>

        <el-form-item label-width="20px" style="float: right">
          <el-button type="primary" icon="el-icon-document">导出</el-button>
        </el-form-item>
      </el-form>

      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="selection" width="50px" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        timeValue: []
      },
      statusOptions: [
        { id: 1, name: '紧急' },
        { id: 2, name: '严重' },
        { id: 3, name: '次要' }
      ],
      tableData: [
        {}, {}, {}
      ],
      columns: [
        { prop: '实例名称', label: '实例名称', width: '', minWidth: '' },
        { prop: '运行状态', label: '运行状态', width: '', minWidth: '' },
        { prop: '运行结果', label: '运行结果', width: '', minWidth: '' },
        { prop: '开始时间', label: '开始时间', width: '', minWidth: '' },
        { prop: '结束时间', label: '结束时间 ', width: '', minWidth: '' },
        { prop: '描述', label: '描述', width: '', minWidth: '' },
        { prop: '描述说明', label: '描述说明', width: '', minWidth: '' }
      ]
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
